<template>
  <div class="page">
    <header-bar></header-bar>
    <el-carousel
      :interval="4000"
      type="card"
      class="carousel"
      style="background-color:rgb(240, 240, 240);"
    >
      <el-carousel-item v-for="(item,index) in sliderImage" :key="index" :label="item.title">
        <el-image
          :src="item.img | toCarouselUrl"
          style="width: 100%; height: 100%"
          fit="fill"
          @click="go(item.url)"
        ></el-image>
      </el-carousel-item>
    </el-carousel>
    <el-card class="recommend">
      <h1>推荐视频</h1>
      <recommend-list ref="child"></recommend-list>
      <div class="more">
        <el-button size="small" icon="el-icon-circle-plus-outline" round @click="getMore">加载更多</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import HeaderBar from "@/components/headerBar";
import recommendList from "@/components/recommendList";
import { toCarouselUrl } from "@/utils/url";
import { getCarouselList } from "@/api/adminSerivce";
export default {
  data() {
    return {
      sliderImage: [],
      videoList: [],
    };
  },
  methods: {
    _getCarouselList() {
      getCarouselList().then((res) => {
        if (res.data.code === 200) {
          this.sliderImage = res.data.data.data;
        }
      });
    },
    go(url) {
      if (url) {
        window.open(url, "_blank");
      }
    },
    getMore() {
      this.$refs.child.getMore();
    },
  },
  components: {
    "header-bar": HeaderBar,
    "recommend-list": recommendList,
  },
  created() {
    this._getCarouselList();
    console.log(
      " **      **   ********   **         **           *******  \n/**     /**  /**/////   /**        /**          **/////** \n/**     /**  /**        /**        /**         **     //**\n/**********  /*******   /**        /**        /**      /**\n/**//////**  /**////    /**        /**        /**      /**\n/**     /**  /**        /**        /**        //**     ** \n/**     /**  /********  /********  /********   //*******  \n//      //   ////////   ////////   ////////     ///////   "
    );
  },
  filters: {
    toCarouselUrl(name) {
      return toCarouselUrl(name);
    },
  },
};
</script>

<style scoped>
.carousel {
  margin: auto;
  width: 88%;
  min-width: 1200px;
}

.recommend {
  margin: auto;
  width: 88%;
  min-height: 800px;
  min-width: 1200px;
}

.more {
  text-align: center;
}
</style>